<template>
    <div>
        <div>
            <el-breadcrumb>
                <el-breadcrumb-item >首页</el-breadcrumb-item>
                <el-breadcrumb-item >商品组</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="herder">
            <span><b>添加商品</b></span>
        </div>
        <div class="box">
            <span>组内商品:</span>
            <el-input v-model="obj.Commodity_group" placeholder="请输入内容"></el-input>
        </div>
        <div class="black">
            <span>是否显示:</span>
            <div @click="add" class="border_box">
                <el-button size="mini">阿松大</el-button>
            </div>
        </div>
        <div class="up">
            <span>是否选择状态</span>
            <el-radio-group v-model="obj.state">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">禁用</el-radio>
            </el-radio-group>
        </div>
        <div class="button">
            <el-button @click="keep" type="primary">主要按钮</el-button>
            <el-button @click="out" plain>成功按钮</el-button>
        </div>
        <div v-show="addlbt" class="box_one">
            <div class="box_content">
                <p class="box_harder"><span>选择商品</span><i @click="add" class="el-icon-close"></i></p>
                <div class="box_search">
                    <div class="mini_input">
                        <!-- <span>排序:</span> -->
                        <select v-model="selected">
                            <option v-for="option in options" :value="option.value" :key="option.id">
                                {{ option.text }}
                            </option>
                        </select>
                        <div class="search">
                            <input type="text">
                            <button>搜索</button>
                        </div>
                    </div>
                </div>
                <div>
                    <el-table :data="arr" border style="width:80%; margin: 0 auto; height: 60%;">
                        <el-table-column prop="date" label="商品" width="498">
                            <template v-slot="{row}">
                                <img style="width:120px;" :src="row.name">
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="价格" width="100">
                        </el-table-column>
                        <el-table-column prop="inventory" label="库存" width="100">
                        </el-table-column>
                        <el-table-column prop="state" label="操作" width="100">
                            <template v-slot="{row}">
                                <el-button v-if="row.state==0" @click="danger(row)" type="danger" size="mini">取消
                                </el-button>
                                <el-button v-else type="success" @click="success(row)" size="mini">选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="5"
                        layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { lwjgroup_updata, lwjgroup_get, lwjupdatagroup_put, commodiygroup_put } from '../../../api/index'
export default {
    data() {
        return {
            currentPage1: 1,
            input: '',
            radio: 1,
            selected: '表单',
            addlbt: false,
            uid: 1,
            page:5,
            size:1,
            options: [
                { text: '感冒药', value: '1' },
                { text: '感冒药', value: '2' },
                { text: '感冒药', value: '3' },
                { text: '感冒药', value: '4' }
            ],
            tableData: [],
            arr: [],
            obj:{}
        }
    },
    methods: {
        keep() {
            const object = {
                id:this.uid,
                Commodity_group: this.obj.Commodity_group,
                state: String(this.obj.state)
            }
            commodiygroup_put(object).then(res => {
                console.log(res)
            })
            this.$router.push('/group')
        },
        out() {
            this.$router.push('/group')
        },
        add() {
            this.addlbt = !this.addlbt
        },
        danger(row) {
            console.log(row)
            const obj = {
                id: row.id,
                state: row.state = 1,
            }
            lwjupdatagroup_put(obj).then(res => {
                console.log(res)
            })
            this.addlbt = !this.addlbt
        },
        success(row) {
            const obj = {
                id: row.id,
                state: row.state = 0,
            }
            lwjupdatagroup_put(obj).then(res => {
                console.log(res)
            })
            this.addlbt = !this.addlbt
        },
        handleSizeChange(val) {
            this.page = val
            this.arr = this.tableData.slice(0, this.page)
        },
        handleCurrentChange(val) {
            this.size = val
            // console.log(val);
            //  console.log((this.size-1) * this.page,this.page*this.size);
            this.arr = this.tableData.slice((this.size - 1) * this.page, this.page * this.size)
        },
    },
    created() {
        // console.log(this.$route.params.id)
        this.uid = this.$route.params.id
        console.log(this.uid,'111')
        lwjgroup_updata({ id: this.uid }).then(res => {
            // this.tableData.push(res.data)
            // console.log(res.data)
            this.obj=res.data
            this.radio = this.obj.state
            console.log(this.obj)
            

        })
        lwjgroup_get().then(res => {
            console.log(res)
            this.tableData = res.data
            this.arr = res.data.slice(0,5)
        })
    },

}   
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
    width: 100%;
    height: 30px;
}

::v-deep .el-input {
    width: 90%;
    height: 30px;
}

.button {
    width: 30%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    // background-color: aqua;
    margin: 300px 0 0 0;


}

.herder {
    width: 100%;
    height: 30px;
    padding: 5px 0 0 18px;
    background-color: #ccc;
    margin: 10px 0 0 0;
    border: 1px #ccc solid;

}

.box_one {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    background-color: rgb(0, 0, 0, 0.5);

    .box_content {
        width: 1000px;
        height: 800px;
        z-index: 10;
        border: 1px red solid;
        background-color: aliceblue;
        position: absolute;
        top:3%;
        left: 22%;
    }

    .box_harder {
        background-color: #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.box {
    width: 100%;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin: 20px 0 0 0;
    justify-content: space-around;
}

.black {
    width: 100%;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin: 20px 0 0 0;
    justify-content: space-around;
}

.border_box {
    width: 90%;
    height: 30px;
    display: flex;
    justify-content: flex-end;
    background-color: #ccc;
}

.up {
    font-size: 14px;
    width: 300px;
    height: 30px;
    display: flex;
    margin: 20px 0 0 0;
    justify-content: space-around;
    align-items: center;
}

.box_search {
    width: 100%;
    height: 40px;
    margin: 10px;

    .mini_input {
        display: flex;
        justify-content: space-around;
    }

    select {
        width: 200px;
        margin: 5px;
    }
}

.search {
    width: 400px;
    height: 30px;
    display: flex;

    // border: 1px red solid;
    input {
        width: 360px;
    }
}
.block{
    margin:  0 0 0 100px;
}
</style>